  <!--A Design by W3layouts
  Author: W3layout
  Author URL: http://w3layouts.com
  License: Creative Commons Attribution 3.0 Unported
  License URL: http://creativecommons.org/licenses/by/3.0/
  -->
  <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
  "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
  <script language="javascript">
  function validateForm() //validate the given info
  {
	  var username=document.forms["register_form"]["username"].value;
  var password_1=document.forms["register_form"]["password_1"].value;
  var password_2=document.forms["register_form"]["password_2"].value;
  var email=document.forms["register_form"]["email"].value;
    var username_len= document.forms["register_form"]["username"].value.length;
  var password_1_len= document.forms["register_form"]["password_1"].value.length;
  var password_2_len= document.forms["register_form"]["password_2"].value.length;
  
  var username_flag=false;
  var password1_flag=false;
  var password2_flag=false;
  var email_flag=false;
 
    if (username==null || username=="")
    {
      alert("User name must be filled out");
      return false;
    }
    else
    {
        if(username_len<5)
        {
            alert("User name should be alteast 5 characters");
            return false;
        }
        if(username_len>16)
        {
            alert("User name should be Up to 16 characters");
            return false;
        }
        username_flag=true;
    }
    
     if (password_1==null || password_1=="")
    {
    alert("Password must be filled out");
    return false;
    }
    else
    {
        if(password_1_len<8)
        {
            alert("Password should be alteast 8 characters");
            return false;
        }
        password1_flag=true;
    }
    
    if (password_2==null || password_2=="")
    {
    alert("Re-enter password must be filled out");
    return false;
    }
     if(!(password_2==null || password_2==""))
    {
      if(!(password_1==password_2))
      {
          alert("Passwords do not match");
            return false;
      }
	  password2_flag=true;
    }
    if (email==null || email=="")
    {
    alert("E-mail must be filled out");
    return false;
    }
    else
    {
       if(  emailValidation())
	   {
		   email_flag=true;
	   }
	   else
	   {
		   return false;
	   }
    }
	
    if(username_flag&& password1_flag && password2_flag &&email_flag)
	{
			register(username,password_1,email);		
	}
  }
  
  function emailValidation() //check that the given email is valid
  {
      var x=document.forms["register_form"]["email"].value;
      var atpos=x.indexOf("@");
      var dotpos=x.lastIndexOf(".");
      if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
        {
        alert("Not a valid e-mail address");
        return false;
        }
		else
		{
			return true;
		}
  }
  </script>
  <script language="javascript">
  function register(user_name,password,email) //send info to server
  {
  	 var serverAddress = '127.0.0.1';
    var request = $.ajax({
        url: "http://" + serverAddress + "/soen-6461-server/useraccounts/create",
        type: "post",
        data : {
				"UserAccounts[username]" : user_name, 
				"UserAccounts[password]" : password
			}
			
		  });	
		
	request.done(function (response, textStatus, jqXHR){
		$('#response').text((JSON.stringify(response)));
		if(response.code==100)
		{
			window.location="index.html"
		}
		else if(response.code== -100)
		{
			document.getElementById("response").innerHTML="User name already exists";
		}
  
    });
	
	
  }
  </script>
  
<script>
$(document).ready(function(){

  var serverAddress = '127.0.0.1';
	
  $("#signinb").click(function(){
	  
	  var user_name= document.getElementById("username").value;
	var pass= document.getElementById("password").value;
	
    var request = $.ajax({
        url: "http://" + serverAddress + "/soen-6461-server/login/perform",
        type: "post",
        data : {
				username: user_name, 
				password : pass
			}
    });
	
	request.done(function (response, textStatus, jqXHR){
		
		$('#response').text((JSON.stringify(response)));
	    if(response.code==100)
                {
                        window.location="index.html"
                }
                else if(response.code== -100)
                {
                        document.getElementById("response").innerHTML="User name already exists";
                }

        
    });
	
  });
});
</script>
  <html>
  <head>
  <title>iQ Online Survey System| Registration </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link href="css/style.css" media="all" rel="stylesheet" type="text/css" />
  </head>
  <body class="bg">
  <div class="header-bg">
  <div class="wrap">
      <div class="header">
          <div class="logo">
                  <a href="index.html"><b><font color="#00FF33" size="+3">iQ Online Survey System</font></b> </a>
           </div> </a>
           </div>
      <div class="drp-dwn">
          <select onchange="window.location=this.options[this.selectedIndex].value">
			<option value="index.html">Home</option>
			<option value="signin.html">Signin</option>
			<option value="participate_in_survey.html">Participate In survey </option>
			<option value="about.html">About</option>
		</select>
      </div>
       <div class="clear"></div>
      </div>
  </div>
  </div>
  <div class="wrap">
      <div class="content">
  <div class="section group">				
                  <div class="col span_1_of_3">
                      <div class="contact_info">
                          <h1 >Sign up for your FREE account </h1>
                              <div class="map">
                                <form id="register_form" method="post" action="">
                                  <p>User Name*</p>
                                  <p>
    <input type="text" name="username" id="username" />
    <font size="-3" >5 to 16 characters</font>               </p>
                                  <p>
                                    <label for="password">Password*&nbsp;&nbsp;<br />
                                    </label>
                                    <input name="password_1" type="password" id="password" />
                                    <font size="-3" >at least 8 characters</font>                                		    	 		      </p>
                                    <p>
                                      <label for="re-password">Retype password*<br />
                                      </label>
                                      <input name="password_2" type="password" id="re-password" />
                                  </p>
                                    <p>
                                      <label for="email">Enter your contact email*</label>
                                   </p>
                                                                <p>
                                                                  <input type="text" name="email" id="email" />
                                                              </p>
                                  <p>
                                    <input name="signupb" type="button" id="signupb" value="SignUp"  onclick="return validateForm()"  style="float: right" />
                                  </p>
                                </form>
                            <div id="response">
                                  
                                  </div>
                                <small><a href="https://maps.google.co.in/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=Lighthouse+Point,+FL,+United+States&amp;aq=4&amp;oq=light&amp;sll=26.275636,-80.087265&amp;sspn=0.04941,0.104628&amp;ie=UTF8&amp;hq=&amp;hnear=Lighthouse+Point,+Broward,+Florida,+United+States&amp;t=m&amp;z=14&amp;ll=26.275636,-80.087265" style="color:#fff;;text-align:left;font-size:12px">View Larger Map</a></small>
                        </div>
                      </div>
                  </div>
  </div>
      </div>	
  
  </div>
  <div class="footer-bg">
  <div class="wrap">
  <div class="footer">
          <div class="f_grid1">
          <ul class="f_nav">
                <li class="active"><a href="index.html">Home</a></li>
				<li><a href="signin.html">Signin</a></li>
				<li><a href="participate_in_survey.html">Participate In survey</a></li>
				<li><a href="about.html">About</a></li>
			</ul>
			<div class="copy">
				<p class="w3-link">© All Rights Reserved | Design by&nbsp; <a href="http://w3layouts.com/"> W3Layouts</a></p>
              </div>
              <div class="clear"></div>
          </div>
  </div>
  </div>
  </div>
  </body>
  </html>